<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="16"
        ><div class="grid-content bg-purple">
          <div id="bingzhuangtu" class="divst"></div></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>国内疫情</span>
              <p>数据更新时间: {{ this.date }}</p>
            </div>

            <div class="div-card-list">
              <h3>现有确诊:{{ this.chinaTotal.nowConfirm }}</h3>
              <h3>疑似病例:{{ this.chinaTotal.suspect }}</h3>
              <h3>昨日新增:{{ this.chinaTotal.nowConfirm }}</h3>
            </div>
            <div class="div-card-list">
              <h3>累计确诊:{{ this.chinaTotal.confirm }}</h3>
              <h3>累计死亡:{{ this.chinaTotal.dead }}</h3>
              <h3>治愈人数:{{ this.chinaTotal.heal }}</h3>
            </div>
          </el-card>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mapData } from "../../assets/mapData.js";
export default {
  data() {
    return {
      date: {},
      chinaTotal: {},
      option: {
        title: {
          text: "疫情地图",
        },

        tooltip: {
          formatter: "{a}-{b} 确认感染: {c}人",
        },
        visualMap: [
          {
            type: "piecewise",
            pieces: [
              {
                min: 1000,
                label: ">=1000",
                color: "#E64546",
              },
              {
                min: 100,
                max: 999,
                label: "100-999",
                color: "#F57567",
              },
              {
                min: 10,
                max: 99,
                label: "10-99",
                color: "#FF9985",
              },
              {
                min: 1,
                max: 9,
                label: "1-9",
                color: "#FFE5DB",
              },
              //   {
              //       min:0,
              //       label:'0',
              //       color:'#E64546'
              //   }
            ],
          },
        ],
        geo: {
          type: "map",
          map: "chinaMap",
          zoom: 1,
          label: {
            show: false,
          },
          emphasis: {
            label: {
              areaColor: "pink",
            },
          },
        },

        series: [
          {
            name: "中国地图",
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "江苏省",
                value: 11,
              },
              {
                name: "北京市",
                value: 86,
              },
              {
                name: "安徽省",
                value: 0,
              },
            ],
          },
        ],
      },
    };
  },

  name: "Dashboard",
  mounted() {
    this.getaxios();
    this.getData();
  },
  methods: {
    getData() {},
    async getaxios() {
      let result = await this.$API.myapi.requYiQing();
      console.log(result,'1234')

      // let reg = /\\/g
      // let r = result.data.data.replace(reg,'')
      // console.log(r,'r')
      let data = result.data.data.diseaseh5Shelf
      console.log(result.data.data.diseaseh5Shelf.areaTree,'esult.diseaseh5Shelf.areaTree')

      // return
      data.areaTree= result.data.data.diseaseh5Shelf.areaTree[0]
      // let data = JSON.parse(r);

      // return
      this.date = data.lastUpdateTime;
      this.chinaTotal = data.chinaTotal;
      console.log(data);
      let dataArr = [];
      let arr = [];
      dataArr = data.areaTree.children;
      for (let i = 0; i < dataArr.length; i++) {
        if (
          dataArr[i].name == "北京" ||
          dataArr[i].name == "重庆" ||
          dataArr[i].name == "上海" ||
          dataArr[i].name == "天津"
        ) {
          let a = {
            name: dataArr[i].name + "市",
            value: dataArr[i].total.nowConfirm,
          };
          arr.push(a);
        }

        if (dataArr[i].name == "内蒙古" || dataArr[i].name == "西藏") {
          let a = {
            name: dataArr[i].name + "自治区",
            value: dataArr[i].total.nowConfirm,
          };
          arr.push(a);
        }

        if (dataArr[i].name == "新疆") {
          let a = {
            name: dataArr[i].name + "维吾尔自治区",
            value: dataArr[i].total.nowConfirm,
          };
          arr.push(a);
        }

        if (dataArr[i].name == "宁夏") {
          let a = {
            name: dataArr[i].name + "回族自治区",
            value: dataArr[i].total.nowConfirm,
          };
          arr.push(a);
        }
        if (dataArr[i].name == "广西") {
          let a = {
            name: dataArr[i].name + "壮族自治区",
            value: dataArr[i].total.nowConfirm,
          };
          arr.push(a);
        }
        if (dataArr[i].name == "香港") {
          let a = {
            name: dataArr[i].name + "特别行政区",
            value: dataArr[i].total.nowConfirm,
          };
          arr.push(a);
        }

        let a = {
          name: dataArr[i].name + "省",
          value: dataArr[i].total.nowConfirm,
        };
        arr.push(a);
      }

      this.option.series[0].data = arr;
      let myChart = echarts.init(document.querySelector("#bingzhuangtu"));

      echarts.registerMap("chinaMap", mapData);

      myChart.setOption(this.option);
    },
  },
};
</script>

<style lang="scss" scoped>
.div-card-list {
  display: flex;
}
.box-card {
  margin-top: 20px;
}
.divst {
  margin-left: 200px;
  width: 800px;
  height: 800px;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
